<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 
        head标签配置一些信息，
        引入一些资源
    -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        /* 外部样式可以和页内样式组合使用 */
        /* *{color: red} */
        .li{font-size: 30px;color: blue;}
        /* 后代(包含)选择器 */
        .list li{
            color: red;
        }
        /* 选择器优先级 */
        /* 行内样式优先级最高：1000 */
        /* 后代选择器优先级就是各个选择器优先级之和 */
        /* id：100
        class: 10
        标签：1 */
    </style>
</head>
<body>
    <!-- <ul>
        <li>11</li>
        <li>22</li>
    </ul> -->
    <ul class="list">
        <li class="li">1</li>
        <li class="li">2</li>
    </ul>
    <ul>
        <li class="li">a</li>
        <li class="li">b</li>
    </ul>

    <!-- css和JavaScript的执行，都要依赖于html -->
    <h1 id="title">Css-层叠样式表</h1>
    <h2 class="text-red">控制网页样式</h2>
    <h2 class="text-yellow txt80">控制网页样式</h2>
    <p id="content">123456</p>
    <a class="red" href="http://www.baidu.com">百度</a>
    <a 
        style="color: blue;" 
        class="red" 
        href="http://www.baidu.com"
    >百度</a>

    <p style="height: 500px"></p>
</body>
</html>